import React from 'react';
import { Menu, Dropdown, Icon, Select } from 'antd';
import './index.less';
import axios from 'axios';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';
const menu = (
  <Menu>
    <Menu.Item key="0">
      <a href="javascript:;">1st menu item</a>
    </Menu.Item>
    <Menu.Item key="1">
      <a href="javascript:;">2nd menu item</a>
    </Menu.Item>
    <Menu.Item key="3">3rd menu item</Menu.Item>
  </Menu>
);

class HeadSand extends React.Component {
  constructor() {
    super();
    this.state = {
      networkdata: [],
      orgiddata: [],
      userName: '',
      orgname: '组织1'
    };
  }
  logOut = () => {
    localStorage.setItem('history', window.location.hash);
    localStorage.setItem('token', '');
    localStorage.setItem('userName', '');
    // this.props.dispatch({
    //     type:'changestatus',
    //     status: false
    // })
    setTimeout(() => {
      window.location.hash = '/';
      this.props.dispatch({
        type: 'changestatus',
        status: false
      });
    });
  }
  personMenu = (
    <Menu >
      <Menu.Item key="0">
        <Link to="/changePassword"><span>密码修改</span></Link>
      </Menu.Item>
      <Menu.Item key="1">
        <Link to="/changePhone"><span>手机修改</span></Link>
      </Menu.Item>
      <Menu.Item key="2">
        <span onClick={this.logOut}>退出登录</span>
      </Menu.Item>
    </Menu>
  );
  componentWillMount() {
    this.ismounted = true;
    var $this = this;
    this.props.dispatch({
      type: 'changeorgid',
      orgid: 50
    });
    this.props.dispatch({
      type: 'channelId',
      channelid: 'mychannel',
    });
    this.props.dispatch({
      type: 'changenetwork',
      network: null
    });
    setTimeout(() => {
      $this.getData();
      $this.setState({
        userName: localStorage.getItem('userName')
      });
    });
  }
  componentWillUnmount() {
    this.ismounted = false;
  }
  Sandboxc1 = () => {
    localStorage.setItem('sandbox', 1);
    this.props.dispatch({
      type: 'changSandBox',
      changesand: 1
    });
    this.props.dispatch({
      type: 'changenetwork',
      network: ''
    });
    this.props.dispatch({
      type: 'changeorgid',
      orgid: ''
    });
  }
  sandbox = (
    <Menu>
      <Menu.Item key="0" disabled >
        沙盒环境（SAND）
      </Menu.Item>
      <Menu.Item key="1" >
        <a onClick={this.Sandboxc1} >生产环境（PROD）</a>
      </Menu.Item>
    </Menu>
  )

  changenetwork=(event, Name) => {
    let ev = event;
    let name = Name;
    if (!name) {
      name = ev.item.props.children;
    }
    if (typeof ev != 'string' && typeof ev != 'number' && ev != undefined) {
      ev = ev.key;
    }
    this.props.dispatch({
      type: 'changenetwork',
      network: ev
    });
    // this.setState({
    //     network : ev,
    //     networknickname:name });
  }

  getData = () => {
    var $this = this;
    const Token = localStorage.getItem('token');
    setTimeout(() => {
      axios({
        method: 'get',
        url: '/api/sandbox/fabric/queryNetWorkName?token=' + Token,
        headers: {
          'Content-Type': 'application/json',
          Authorization: Token
        },
        params: { orgId: this.props.changeOrgid }
      })
        .then(function (response) {
          if ($this.ismounted) {
            if (response.data && response.data[0]) {
              $this.setState({
                networkdata: response.data,
                network: response.data[0].nickname
              });
              $this.changenetwork(response.data[0].networkName, response.data[0].nickname);
              $this.props.dispatch({
                type: 'changenetwork',
                network: response.data[0].networkName
              });
              $this.props.dispatch({
                type: 'netOrg',
                net: response.data
              });
            }
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    });
  }
  render() {
    var orgidList = (<Menu.Item key={50} >{'组织1'}</Menu.Item>);
    var networkList = '';
    let networkname = this.props.changeNetwork;
    if (this.state.networkdata.length !== 0) {
      networkList = this.state.networkdata.map((e, i) => {
        if (e.networkName == networkname) networkname = e.nickname;
        return (
          <Menu.Item key={e.networkName} >{e.nickname}</Menu.Item>
        );
      });
    } else {
      networkname = '暂无网络';
      networkList = (<Menu.Item disabled>暂无网络</Menu.Item>);
    }
    return (
      <div className="clearfix">
        <Dropdown overlay={this.sandbox} trigger={['click']}>
          <a className="ant-dropdown-link" href="#">
            <p className="text">沙盒环境（SAND）</p>
            <Icon type="down" />
          </a>
        </Dropdown>
        <Dropdown overlay={this.personMenu} trigger={['click']} >
          <a className="ant-dropdown-link-u txt" href="#">
            <div className="DropdownItem DropItem3">
              <p className="text">{this.state.userName}</p>
              <Icon type="down" />
            </div>
          </a>
        </Dropdown>
        <div className="DropdownItem DropItem1">
          <Dropdown overlay={(<Menu onClick={this.changenetwork} >{networkList}</Menu>)} trigger={['click']} >
            <a className="ant-dropdown-link" href="#">
              <p className="textp">网络: </p>
              <p className="textcontent">{networkname} </p>
              <Icon type="down" />
            </a>
          </Dropdown>
        </div>

        <div className="DropdownItem DropItem2">
          <Dropdown overlay={(<Menu onClick={this.changeorgid} >{orgidList}</Menu>)} trigger={['click']} >
            <a className="ant-dropdown-link" href="#">
              <p className="textp">组织: </p>
              <p className="textcontent">{this.state.orgname} </p>
              <Icon type="down" />
            </a>
          </Dropdown>
        </div>
      </div>
    );
  }
}

export default connect((state) => {
  return { ...state };
})(HeadSand);
